import React from 'react';
import styles from './styles.styl';
import util from '../../../util'
import cx from 'classnames'

class ObjectiveDrag extends React.Component {
  
  constructor(props) {
    super(props);
    this.displayName = 'ObjectiveDrag';

    this.state = {
      isDrag: false,
      index: 0,
      currentIndex: 0,
      height: 0,
      minY: 0,
      maxY: 0,
      winHeight: 0,
    }
  }
  handleMouseDown = (i, e) => {
    const {
      list = [],
    } = this.props;
    const clientY = e.clientY;
    const winHeight = document.body.clientHeight;
    this.setState({
      isDrag: true, 
      index: i, //拖动的item
      currentIndex: i, //被拖动的item到达的位置
      height: clientY, //点击时的鼠标Y坐标
      winHeight: winHeight, //浏览器高度
      y: 0, //偏移
      minY: (i)*60 + 57 - clientY, //页面scrll向上最大位移
      maxY: (list.length - i - 1) * 60 + 58 - winHeight + clientY, //页面scrllo向下最大位移
      scrollY: 0, //页面偏移
    });
    util.bind(window,'mouseup', this.handleMouseUp);
    util.bind(window,'mousemove', this.handleMouseMove);
  }
  handleMouseUp = () => {
    const {
      list,
      children,
    } = this.props;
    const {
      index,
      currentIndex,
    } = this.state;
    const id = list[index].objectiveId || list[index].teamId;
    this.props.handleMove && this.props.handleMove(id, {orderIndex: list[currentIndex].orderIndex || list[currentIndex].sort}, () =>{
      this.props.handleDone && this.props.handleDone(id);
    });
    this.setState({
      isDrag: false,
    });
    util.unbind(window,'mouseup', this.handleMouseUp);
    util.unbind(window,'mousemove', this.handleMouseMove);
  }
  handleMouseMove = (e) => {
    e.preventDefault();
    const {
      clientY
    } = e;
    const {
      minY,
      maxY,
      index,
      scrollY,
      height,
      winHeight,
    } = this.state;
    
    let nextScrollY = 0;
    //console.log(scrollY+' '+minY+' '+maxY);
    if(clientY < 0){
      nextScrollY = scrollY + 10 > minY ? minY : scrollY + 10;
    }else if(clientY > winHeight){
      nextScrollY = scrollY - 10 < -maxY ? -maxY : scrollY - 10;
    }else{
      nextScrollY = scrollY;
    }
    const y = this.state.height - clientY + nextScrollY; 
    let lastIndex = index - parseInt(y/60);
    if(lastIndex < 0) lastIndex = 0;
    else if(lastIndex > this.props.list.length -1) lastIndex = this.props.list.length -1;
    this.setState({
      y: y,
      scrollY: nextScrollY,
      currentIndex: lastIndex,
    });
  }
  renderDrag = () => {
    const {
      list = [],
    } = this.props;
    const {
      index,
      currentIndex,
      height,
      y,
      scrollY,
    } = this.state;
    return (
      <div className={styles['drag-bg']}>
        <div className={styles['drag-area']} style={{top: `${scrollY}px`}}>
        {
          list.map((item,i) => {
            let itemStyle = {};
            if(index === i){
              itemStyle = {
                top: `${-y}px`,
              }
            }else if(currentIndex > index && i <= currentIndex && i > index){
              itemStyle = {
                transform: `translateY(-60px)`
              }
            }else if(currentIndex < index && i >= currentIndex && i < index){
              itemStyle = {
                transform: `translateY(60px)`
              }
            }
            return (
              <div key={i} className={cx({
                [styles['item-box']]: true,
                [styles['item-active']]: i === index
              })} style={{
                top: `${height + (i - index) * 60 - 28}px`
              }}>
                <div className={styles['item-bg']}></div>                
                <div className={styles['item']} style={itemStyle}>{item.content || item.teamName}</div>
              </div>
            );
          })
        }
        </div>
      </div>
    );
  }
  render() {
    const {
      children,
    } = this.props;
    const {
      isDrag
    } = this.state;
    return (
      <div>
        {
          React.Children.map(children, (v,i) => {
            return React.cloneElement(v, {
              key: i,
              canDrag: true,
              dragItem: (
                <div className={styles['drag-item']} 
                  onMouseDown={(e) => {this.handleMouseDown(i, e);}}
                >
                </div>
              ),
            });
          })
        }
        {
          isDrag ? this.renderDrag() : null
        }
      </div>
    );
  }
}

export default ObjectiveDrag;
